<template id="modal">
  <transition-group
    enter-active-class="animated heartBeat"
    leave-active-class="animated fadeOut"
  >
    <div class="marsk" v-if="visible" key="div">
      <div class="modal-wrap">
        <div class="title">
          <slot name="title">充值提示</slot>
        </div>
        <div class="body">
          <slot name="body">您是否购买小天鹅？</slot>
        </div>
        <div class="footer">
          <button class="del" @click="cancle">取消</button>
          <button class="confirm" @click=confirm()>确定</button>
        </div>
      </div>
    </div>
  </transition-group>
</template>
<script>
//1.通过visible控制组件的显示和隐藏
//2.标题部分，body部分的内容可以灵活修改
//3.点击取消或者确定的时候，回调函数，然后让用户在这些函数中添加自己的代码

export default {
  props:{
    visible: {
      type:Boolean,
      default(){
        return false
      }
    }
  },
  methods:{
    cancle(){
      this.$emit("cancle")
    },
    confirm(){
      this.$emit("ok")
    }
  }
};
</script>

<style scoped>
h1,h2,h3{
  margin:0;
}
.marsk {
        background-color: rgba(0, 0, 0, .6);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
.modal-wrap{
  width: 300px;
  height: 200px;
  background: white;
  border-radius: 20px;
  text-align: center;
}
.title {
  height: 30px;
  line-height: 30px;
}
.body {
  height: 30px;
}
.footer button {
  width: 100px;
  height: 30px;
  background: skyblue;
  color: white;
  border: none;
  border-radius: 20px;
  margin:20px 10px;
}
</style>
